<template>
  <v-app>
    <!-- 导航栏   -->
    <v-app-bar
        elevation="4"
        outlined
        app
        color="#FFF"
    >
      <header-bar/>
    </v-app-bar>
    <v-main>
      <v-container fluid class="d-flex justify-center">

        <v-card tile flat width="760" class="mr-16">
          <!-- 博客分类 -->
          <v-chip-group show-arrows v-model="labelId">
            <v-chip
                label
                class="mx-2 text-caption"
                active-class="info"
                v-for="(blogCategory, index) in blogCategories"
                :key="blogCategory.id"
                :value="blogCategory.id"
                @click.stop="showSecondCategory(index, $event)"
            >
              {{ blogCategory.name }}
            </v-chip>
          </v-chip-group>
          <v-menu
              absolute
              transition="scale-transition"
              :close-on-content-click="false"
              :close-on-click="false"
              :position-x="secondCategory.x"
              :position-y="secondCategory.y"
              v-model="secondCategory.show">
            <v-card width="300">
              <v-chip-group
                  column
                  multiple
                  v-model="secondCategory.secondLabelId"
              >
                <v-chip
                    label
                    small
                    active-class="info"
                    class="ml-4"
                    v-for="option in secondCategory.data"
                    :value="option.id"
                    :key="option.id"
                >
                  {{ option.name }}
                </v-chip>
              </v-chip-group>
            </v-card>
          </v-menu>
          <v-chip-group
              column
              light
              active-class="info"
          >
            <v-chip
                label
                small
                class="mx-2 text-caption"
            >
              最新发布
            </v-chip>
            <v-chip
                label
                small
                class="mx-2 text-caption"
            >
              点赞最多
            </v-chip>
            <v-chip
                label
                small
                class="mx-2 text-caption"
            >
              浏览最多
            </v-chip>
          </v-chip-group>

          <!-- 博客列表 -->
          <blog-card v-for="blog in blogPages.blogList" :key="blog.id" :blog="blog"></blog-card>
          <v-pagination
              class="mt-10"
              v-model="blogPages.currentPage"
              :length="blogPages.totalPage"
              :total-visible="8"
              v-if="blogPages.totalPage !== 1"
          ></v-pagination>
          <loading-plus v-if="beforeReady"/>
        </v-card>
        <!-- 推荐 -->
        <v-card tile flat width="300">
          <v-text-field
              dense
              outlined
              required
              hide-details
              placeholder="搜索博客"
              class="rounded-0"
              :append-icon="'mdi-magnify'"
          ></v-text-field>
          <!-- 推荐博客 -->
          <recommend-blog/>
          <!-- 推荐博主 -->
          <recommend-blog-author/>
        </v-card>
      </v-container>

    </v-main>
    <!-- 登录注册弹出框   -->
    <login-register-dialog/>

    <v-footer padless class="mt-10">
      <zf-footer/>
    </v-footer>
  </v-app>
</template>

<script>
import LoginRegisterDialog from "@/components/LoginRegisterDialog/LoginRegisterDialog";
import BlogCard from "@/components/Blog/BlogCard";
import LoadingPlus from "@/components/LoadingPlus";
import RecommendBlog from "@/components/RecommendBlog/RecommendBlog";
import RecommendBlogAuthor from "@/components/RecommendBlogAuthor/RecommendBlogAuthor";

export default {

  name: "BlogView",
  components: {LoginRegisterDialog, BlogCard, LoadingPlus, RecommendBlog, RecommendBlogAuthor},
  data() {
    return {
      labelId: null,
      beforeReady: false,
      secondCategory: {
        secondLabelId: [],
        show: false,
        data: [],
        x: 0,
        y: 0
      },
      blogCategories: [],
      blogPages: {
        currentPage: 1,
        totalPage: 24,
        blogList: []
      },
    }
  },
  watch: {
    'labelId': {
      handler(newV) {
        let ids = []
        this.blogCategories.forEach((item, index) => {
          ids[index] = item.id
        })
        //如果已经点击一级分类且当前二级分类数量大于0才会显示一级分类,否则不显示二级分类并清空二级分类数据
        if(ids.indexOf(newV) !== -1 && this.secondCategory.data.length > 0) {
          this.secondCategory.show = true
        }else {
          this.secondCategory.show = false
          this.secondCategory.data = []
        }
      },
      immediate: true
    },
    'blogPages.currentPage': {
      handler() {
        this.beforeReady = !this.beforeReady
      }
    }
  },
  mounted() {
    window.addEventListener('scroll',this.handleScroll,true)
  },
  methods: {
    showSecondCategory(index, event) {
      let options = this.blogCategories[index].options
      let rect = event.target.getBoundingClientRect()
      this.secondCategory.x = rect.left
      this.secondCategory.y = rect.top + 32
      this.secondCategory.data = options
    },
    handleScroll(){
      // 滑动滚动条时清空分类
      this.labelId = null
      this.secondCategory.secondLabelId = []
      this.secondCategory.show = false
    }
  },
  created() {
    this.blogCategories = [

      {

        id: 1,

        name: '推荐',

        options: []

      },
      {

        id: 2,

        name: '教学',

        options: [

          {id: 100, name: '数学'},

          {id: 101, name: '英语'},

          {id: 102, name: '语文'},

          {id: 103, name: '历史'},

          {id: 104, name: '化学'},

          {id: 105, name: '政治'},

          {id: 106, name: '生物'},

          {id: 107, name: '体育'},

          {id: 108, name: '音乐'},

        ]

      },

      {

        id: 3,

        name: 'IT',

        options: [

          {id: 109, name: 'Java'},

          {id: 110, name: 'PHP'},

          {id: 111, name: 'C++'},

          {id: 112, name: 'Python'},

          {id: 113, name: 'Hadoop'},

          {id: 114, name: 'Android'},

          {id: 115, name: 'HarmonyOS'},

          {id: 116, name: 'Vue'},

          {id: 117, name: 'HTML'},

          {id: 118, name: 'CSS'},

        ]

      },

      {

        id: 4,

        name: '游戏',

        options: [

          {id: 125, name: 'LOL'},

          {id: 126, name: '王者荣耀'},

          {id: 127, name: '和平精英'},

          {id: 128, name: 'DNF'},

          {id: 129, name: '穿越火线'},

          {id: 130, name: '元神'},

        ]

      },

      {

        id: 5,

        name: '旅游',

        options: [

          {id: 131, name: '骑行'},

          {id: 132, name: '潜水'},

          {id: 133, name: '徒步'},

          {id: 134, name: '登山'},

          {id: 135, name: '国内游'},

          {id: 136, name: '国外游'},

          {id: 137, name: '自驾游'},

        ]

      },

      {

        id: 6,

        name: '时尚',

        options: [

          {id: 138, name: '美妆'},

          {id: 139, name: '护肤'},

          {id: 140, name: '穿搭'},

        ]

      },

      {

        id: 7,

        name: '汽车',

        options: [

          {id: 141, name: '赛车'},

          {id: 142, name: '改装车'},

          {id: 143, name: '新能源车'},

          {id: 144, name: '房车'},

          {id: 145, name: '机车'},

          {id: 146, name: '购车攻略'},

        ]

      },

      {

        id: 8,

        name: '运动',

        options: [

          {id: 147, name: '篮球'},

          {id: 148, name: '足球'},

          {id: 149, name: '网球'},

          {id: 150, name: '健身'},

          {id: 151, name: '滑雪'},

          {id: 152, name: '马拉松'},

        ]

      },

      {

        id: 9,

        name: '舞蹈',

        options: [

          {id: 153, name: '街舞'},

          {id: 154, name: '芭蕾舞'},

          {id: 155, name: '民族舞'},

        ]

      },

      {

        id: 10,

        name: '动物',

        options: [

          {id: 156, name: '犬科动物'},

          {id: 157, name: '猫科动物'},

          {id: 158, name: '爬行动物'},

          {id: 159, name: '两栖动物'},

        ]

      },

      {

        id: 11,

        name: '美食',

        options: [

          {id: 160, name: '热菜'},

          {id: 161, name: '凉菜'},

          {id: 162, name: '汤羹'},

          {id: 163, name: '主食'},

          {id: 164, name: '小吃'},

          {id: 165, name: '西餐'},

          {id: 166, name: '烘焙'},

          {id: 167, name: '饮品'},

          {id: 168, name: '跑酱腌菜'},

        ]

      },
    ]
    const {page, total, blogList} = {
      page: 1,
      total: 25,
      blogList: [

        {

          id: 1,

          title: '小白学前端，希望大佬别嫌弃我这问题太简单不给我说',

          introduction: ' 刚开始接触前端没有几天，好多地方都不知道什么意思，希望大佬们如果知道的话，在下面评论给我说一下谢谢在uni中这个两个花括号是什么意思 this.$dw.api.getQxglData当中$后面这个值是什么意思呀',

          cover: 'https://cdn.vuetifyjs.com/images/john.jpg',

          time: '2021-11-23',

          eye: 16352,

          comment: 4563,

          like: 9875,

          author: {

            nickname: '自古风流',

            headPic: 'https://cdn.vuetifyjs.com/images/lists/2.jpg',

          },

          to: ''

        },

        {

          id: 2,

          title: 'jdbc增删改查操作，封装工具类，实现泛型接口无限套娃',

          introduction: '好家伙、转眼就要过年了，这段时间又有师妹通过我实验室师妹要到我的联系方式、让我帮忙给指导大四的项目、要搞一个买卖二手闲置品的商城、既想要 PC web端、又想要小程序，还想要 xx',

          cover: 'https://cdn.vuetifyjs.com/images/carousel/bird.jpg',

          time: '2021-11-23',

          eye: 17889,

          comment: 24323,

          like: 43249,

          author: {

            nickname: 'java李杨勇',

            headPic: 'https://cdn.vuetifyjs.com/images/lists/1.jpg',

          },

          to: ''

        },

        {

          id: 3,

          title: 'Java实现Excel导入和导出，看这一篇就够了(珍藏版)',

          introduction: '最近抽了两天时间，把Java实现表格的相关操作进行了封装，本次封装是基于 POI 的二次开发，最终使用只需要调用一个工具类中的方法，就能满足业务中绝大部门的导入和导出需求。',

          cover: 'https://img2.baidu.com/it/u=2474219441,3739941751&fm=253&fmt=auto&app=138&f=PNG?w=500&h=257',

          time: '2021-12-23',

          eye: 187800,

          comment: 13243,

          like: 64548,

          author: {

            nickname: 'zyqok',

            headPic: 'https://cdn.vuetifyjs.com/images/lists/4.jpg',

          },

          to: ''

        },

        {

          id: 4,

          title: '英特尔 Linux Vulkan 驱动程序的首席开发人员离职；JDK 18 功能集被冻结',

          introduction: '英特尔 Linux Vulkan 驱动程序的首席开发人员离职；JDK 18 功能集被冻结',

          cover: 'https://t7.baidu.com/it/u=1956604245,3662848045&fm=193&f=GIF',

          time: '2021-1-23',

          eye: 52332,

          comment: 26313,

          like: 4554,

          author: {

            nickname: '开源头条',

            headPic: 'https://cdn.vuetifyjs.com/images/lists/5.jpg',

          },

          to: ''

        },

        {

          id: 5,

          title: '计算机为何可以运行Java代码？',

          introduction: '计算机为何可以运行Java代码？',

          cover: 'https://t7.baidu.com/it/u=2529476510,3041785782&fm=193&f=GIF',

          time: '2020-1-23',

          eye: 45353,

          comment: 23789,

          like: 12324,

          author: {

            nickname: 'JavaEdge',

            headPic: 'https://cdn.vuetifyjs.com/images/lists/3.jpg',

          },

          to: ''

        },

      ]
    }
    this.blogPages.currentPage = page
    this.blogPages.totalPage = total
    this.blogPages.blogList = blogList
  }
}
</script>

<style scoped>
</style>
